<template>
  <div class="form_box">
    <avue-form :option="option" v-model="crudData.form" @submit="handleSubmit">

    </avue-form>
  </div>
</template>
<script setup>
import { callCenterList, serrveSave } from "@/api/user/index.js";

import { ElMessage } from "element-plus";
import { onMounted } from "vue";

let props = defineProps({
  content: {
    type: Object,
    default: () => [],
    required: true
  }
})
const crudData = reactive({
  form: {},
  nowData: {},
  dynamic: []
})
const option = reactive({
  labelWidth: 200,
  size: 'medium',
  column: [
    {
      label: '客服公告',
      prop: 'attrName',
      span: 24,
      rules: [
        {
          required: true,
          message: '请输入客服公告',
          trigger: 'blur',
        },
      ],
    },
    {
      label: '客服链接1',
      prop: 'attrName1',
      span: 24,

    },
    {
      label: '客服链接2',
      prop: 'attrName2',
      span: 24,

    },

  ]
})
const handleSubmit = (form, done) => {
  let arr = []
  // let name = option.column.map(item => item.label)
  // let name = ['announcement','telegram','WhatsApp']
  let value = Object.values(crudData.form)
  option.column.forEach((item, index) => {
    let params = {
      attrName: crudData.dynamic[index].attrName,
      attrValue: value[index],
      id: crudData.dynamic[index].id
    }
    arr.push(params)
  });
  serrveSave(arr).then(res => {
    ElMessage.success('操作成功')
    initData()
  }).catch(err => {
  })
  done()
}
const initData = async () => {
  await callCenterList().then(res => {
    console.log('res', res);
    crudData.dynamic = res.data
    let prop = option.column.map(item => item.prop)
    prop.forEach((item, index) => {
      crudData.form[item] = crudData.dynamic[index].attrValue
    })
  }).catch(() => {
  })
}
onMounted(() => {
  initData()
})
</script>
<style scoped lang="scss">
.form_box {
  width: 100%;
  padding: 0 20px 20px 20px;
  height: calc(100vh - 120px);
  overflow-y: auto;

  ::v-deep .avue-form {
    .el-collapse-item__wrap {
      padding: 20px;
    }
  }
}

::v-deep .el-input-group__prepend {
  padding: 0 15px;
}
</style>
